
import React from 'react';
import './index.less';
import CommonModal from '../../components/CommonModal/index.jsx';
import { vendorsDanger, vendorsWarning } from '../../utils/config.js';
import { onSearchHistoryList } from './index.config.js';

class ApproveHistoryModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showModal: false,
            historyListData: [], // 历史数据
        };
        this.output = {
            initModal: this.initModal,
            closeModal: this.closeModal
        }
    }
    componentDidMount() {

    }

    componentWillUnmount() {

    }

    closeModal = () => {
        this.setState({ showModal: false });
    }

    initModal = ({ data, primaryKey }) => {
        if (data) {
            let postData = {
                billType: data.billType,
                tenantId: data.pkTenant,
                userId: data.creator,
                businessKey: data[primaryKey],
                ieStamp: new Date().getTime()
            };
            onSearchHistoryList(postData).then((res) => {
                let { resultCode, result, exMsg } = res.data;
                if (resultCode === 'ok') {
                    this.setState({ historyListData: result, showModal: true });
                } else {
                    vendorsDanger({ text: exMsg });
                }
            });
        } else {
            vendorsWarning({ text: '请选择数据!' });
        }
    }

    getModalContext = () => {
        return <div className="approval--way">
            <div className="way--list">
                <ul>
                    {this.state.historyListData ? this.state.historyListData.map((item, index) => {
                        return this.handlerCreateListItem(item)
                    }) : ''}
                </ul>
            </div>
        </div>;
    }

    handlerCreateListItem = (item) => {
        if (item.allApprovalPersonName.indexOf(';') === -1) {
            return (<li className="clearfix">
                <div className="item--status">
                    <span>{item.approvalStatusDesc}</span>
                    {this.handlerComputedClass(item)}
                    <b className="line"></b>
                </div>
                <div className="item--content">
                    <div className="base--data clearfix">
                        <span className="name">{item.allApprovalPersonName}</span>
                        <span className="date">{item.approvalRecordVOList[0].endTime}</span>
                    </div>
                    <p>审批意见：{item.approvalRecordVOList[0].approvalComment}</p>
                </div>
            </li>)
        } else {
            return (<li className="clearfix">
                <div className="item--status">
                    <span>{item.approvalStatusDesc}</span>
                    {this.handlerComputedClass(item)}
                    <b className="line"></b>
                </div>
                <div className="item--content">
                    <div className="base--data clearfix">
                        <p className="name--spe">{item.allApprovalPersonName.split(';').join('  ')}</p>
                    </div>
                    <ul className="list--spe">
                        {item.approvalRecordVOList.map((item, index) => {
                            return <li>
                                <div className="base--data clearfix">
                                    <span className="name">{item.approvalPersonName}</span>
                                    <span className="date">{item.endTime}</span>
                                </div>
                                <p>审批意见：{item.approvalComment}</p>
                            </li>
                        })}
                    </ul>
                </div>
            </li>)
        }
    }

    handlerComputedClass = (item) => {
        let className = "";
        switch (item.approvalStatus) {
            case 'submit':
            case 'adopt':
                className = <em className="right--status"></em>;
                break;
            case 'reject':
                className = <em className='fail--status'></em>;
                break;
            case 'approvalPending':
                className = <em className="pending--status"></em>;
                break;

        }
        return className
    }

    render() {
        return (
            <CommonModal show={this.state.showModal}
                confirm={this.closeModal}
                close={this.closeModal}
                content={this.getModalContext()}
                backdrop={true}
                size='lg'
                title='审批详情'
                oneButton={true}
                modalOneBtnStatus={false}
            >
            </CommonModal>
        )
    }
}



export default function YGCreateApproveModal(params) {
    return (
        <ApproveHistoryModal ref={child => this.approveHistory = child} {...params} />
    )
}